<template>
  <div id="main">
    <br>
    <label>搜索关键字:</label>
    <input class="top-input" type = "text" placeholder = "请输入关键字" v-model = "keyword">
    <button type = "button" class="btn btn-sm btn-primary color"  @click="onSearch" v-model="keyword">查找</button>
    <br>
    <hr>
    <br>
    <table class="table table-striped table-hover">
      <tr>
        <td width="100"> 序号 </td>
        <td width="100">  名字  </td>
        <td> 作者   </td>
        <td>  图书类型  </td>

        <td>  入库时间  </td>
        <td>  在馆数  </td>
        <td>  图书状态  </td>
      </tr>
      <tr v-for="(item,index) in list.slice((current-1)*size,current*size)">
        <td width="100"> {{index+1}} </td>
        <td width="100">{{item.name}}</td>
        <td> {{item.author}} </td>
        <td>{{item.bookCategory.category}} </td>
        <td>{{item.storageTime}} </td>
        <td>{{item.quantitiesInLibrary}} </td>
        <td>{{item.status.status}} </td>
        <td></td>
      </tr>
    </table>

    <Page :total="total" :allPage="allpage" v-on:change="changePage"></Page>

  </div>
</template>

<script>

    import axios from 'axios';
    import Page from '@/publicComponent/Page';

    export default {
        name: "Book",
        components:{
            Page
        },
        data: function () {
            return  {
                url:this.baseURL+'book.ctl',
                bcurl:this.baseURL+'BookCategory.ctl',
                bsurl:this.baseURL+'status.ctl',
                lurl:this.baseURL+'library.ctl',
                list:[],
                bclist:[],
                bslist:[],
                llist:[],
                obj:{},
                bookCategory:{},
                status:{},
                location:{},

                keyword:'',

                size:4,
                current:1,
                total:0,
                allpage:0,
            }
        },
        created(){
            this.getList();
            var arr = this;
            axios.get(this.url).then((res) => {
                this.list=res.data;
            })
        },
        methods:{

            getList(){
                axios.get(this.url).then((res) => {
                    this.list=res.data;
                    this.total=this.list.length
                    this.allpage=Math.ceil(this.total/this.size)//ceil小数向上取整 round四舍五入 parseInt丢弃小数
                })
            },

            onSearch(){
                var arr = this;
                axios.get(this.url+"?keyword="+this.keyword).then((response) => {
                    arr.list=response.data;
                })
            },
            changePage:function(index){
                this.current = index;
            }
        }

    }
</script>

<style scoped>
  .color{
    background-color:#E6E6E6; color: #555555}
  #main{padding:5px;}
  .modal-body{
    text-align: center;
    position: relative;
    line-height: 50px;
    padding-left:50px;
  }
  .modal-body input{
    height:28px;
  }
</style>
